<template>
	<div class="card">
		<div class="tips">
			<Icon type="ios-checkmark-circle-outline" color="green" />商户进件材料已提交，请注意查看短信。根据信息提示，查询对公账户打款信息，在本页面完成企业小额验证
		</div>
		<div class="mint-cell smallMoney">
			<div class="smallMoney_title" style="width:23%">
				小额金额
			</div>
			<div style="width:46%">
				<mt-field placeholder="请输入" v-model="formTop.amount" icon="more" class="money"></mt-field>
			</div>
			<div style="width:30%">
				<mt-button type="danger" plain @click.native="handleRepay">重新打款</mt-button>
			</div>
		</div>
		<mt-cell>
			<p slot="title">
				<Icon type="md-alert" color="red" />还剩余<span class="smallMoney_highlight">{{ 4 - Number($route.query.verifyNum ) }}</span>次小额鉴权机会，<span
				 class="smallMoney_highlight">{{ 9 - Number($route.query.restartNum ) }}</span>次重新小额打款机会</p>
		</mt-cell>
		<mt-button type="danger" size="large" @click.native="handleAuthentication('confirm')" style="margin:10px 0">小额鉴权</mt-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formTop: {
					amount: ""
				}
			}
		},
		mounted() {
			this.$tools.bk_set_nav_title('小额鉴权');
		},
		methods: {
			handleAuthentication(query) {
				if (this.formTop.amount == '') {
					this.$messagebox({
						title: '提示',
						message: '输入必填项',
						showCancelButton: false,
						confirmButtonText: "确认"
					})
					return;
				} else {
					let verType = query && query == 'confirm' ? 'verify' : 'again';
					let data = {};
					data.instanceId = this.$route.query.instanceId;
					data.amount = this.formTop.amount;
					data.number = this.$route.query.number;
					data.verCode = "123456";
					data.verType = verType;
					data.client = "app";
					this.$ajax.post(this, this.$api.POST_SMALL, data, (res) => {
						if (res != undefined && res.code == "200") {
							this.getStatus();
						} else {
							this.$messagebox({
								title: '提示',
								message: res.msg,
								showCancelButton: false,
								confirmButtonText: "确认"
							})
						}
					});
				}
			},
			handleRepay() {
				if (this.formTop.amount == '') {
					this.$messagebox({
						title: '提示',
						message: '输入必填项',
						showCancelButton: false,
						confirmButtonText: "确认"
					})
					return;
				} else {
					let verType = 'again';
					let data = {};
					data.instanceId = this.$route.query.instanceId;
					data.amount = this.formTop.amount;
					data.number = this.$route.query.number;
					data.verCode = "123456";
					data.verType = verType;
					data.client = "app";
					this.$ajax.post(this, this.$api.POST_SMALL, data, (res) => {
						if (res.code == "200") {
							this.$messagebox({
								title: '重新打款成功',
								message: '<div>商户进件材料已提交，请注意查看信息。根据信息提示，查询对公账户打款信息，在本页面</div>',
								showCancelButton: false,
								confirmButtonText: "确认",
								cancelButtonText: "取消"

							}).then(action => {
								if (action == 'confirm') {
									this.getStatus();
									// window.open(res.data.content, '_self');
								}
							})
						} else {
							this.$messagebox({
								title: '提示',
								message: res.msg
							})
						}
					});
				}

			},
			getStatus() {
				let datas = {
					instanceId: this.$route.query.instanceId,
					number: this.$route.query.number
				}
				this.$router.push({
					name: "Error",
					query: {
						formdatas: JSON.stringify(datas)
					}
				})
			}
		}
	}
</script>
<style>
	.money {
		background-image: none !important;
	}
</style>
<style scoped>
	.tips {
		padding: 10px;
	}

	.smallMoney {
		padding: 0 10px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.smallMoney_title {
		font-size: 16px;
	}

	.smallMoney_highlight {
		color: red;
	}
</style>
